<!-- 
    功能强大的FullCalendar日历组件
    根据需要安装插件：
    npm install --save @fullcalendar/vue
			 	         @fullcalendar/daygrid
			           @fullcalendar/interaction
			  	       @fullcalendar/timegrid
			  	       @fullcalendar/timegrid

    FullCalendar官方文档:https://fullcalendar.io/
    
    使用方法:
    <qm-calendar 
     @events="events"
     >
    </qm-calendar>
    核心方法：
    events(start,callback)相当于分页函数。start能获取当前视图时间信息,callback接收event数组.
    /////////////////////////
    详细说一下event数组类型,因为这个组件接收的参数是有规则的。请参考文档 https://fullcalendar.io/docs/event-parsing
    例子：events(start,callback){
          var even = [
            {
              id: "20211112001",
              allDay: true,
              start: "2021-11-01T00:00:00",
              end: "2021-11-01T00:00:00",
              title: "一整天的活动",
            },
            {
              id: "20211112002",
              allDay: false,
              start: "2021-11-01T09:00:00",
              end: "2021-11-01T12:00:00",
              title: "9点-12点的活动",
            },
            {
              id: "20211112003",
              allDay: true,
              start: "2021-11-02T09:00:00",
              end: "2021-11-02T12:00:00",
              title: "点击访问百度",
              url: "https://www.baidu.com/",
            },
            {
              id: "20211112004",
              allDay: true,
              start: "2021-11-03T09:00:00",
              end: "2021-11-03T12:00:00",
              color: "#993399",
              title: "指定主体颜色",
            },
            {
              id: "20211112005",
              allDay: true,
              start: "2021-11-03T09:00:00",
              end: "2021-11-03T12:00:00",
              color: "#993399",
              backgroundColor: "black",
              borderColor: "yellow",
              textColor: "red",
              title: "指定细粒度颜色",
            },
            {
              id: "20211112006",
              allDay: true,
              start: "2021-11-04T00:00:00",
              end: "2021-11-06T00:00:00",
              title: "跨天的活动(注意结束时间和allDay属性)",
            },
            {
              id: "20211112007",
              allDay: false,
              start: "2021-11-04T09:00:00",
              end: "2021-11-05T16:00:00",
              title: "跨天的活动(注意结束时间和allDay属性)",
            },
            {
              daysOfWeek: ["1"],
              startTime: "11:00:00",
              endTime: "11:30:00",
              color: "red",
              title: "每周一重复(拖动试试)",
            },
            {
              groupId: "20211112008",
              daysOfWeek: ["1"],
              startTime: "11:00:00",
              endTime: "11:30:00",
              color: "yellow",
              title: "每周一重复(拖动试试)",
            },
            {
              groupId: "20211112009",
              daysOfWeek: ["2"],
              startTime: "11:00:00",
              endTime: "11:30:00",
              color: "red",
              title: "每周二重复(在限定时间里))",
              startRecur: "2021-11-08",
              endRecur: "2021-11-17",
            },
            {
              groupId: "20211112010",
              daysOfWeek: ["2"],
              startTime: "11:00:00",
              endTime: "11:30:00",
              color: "red",
              allDay: true,
              title: "每周二重复(在限定时间里))",
              startRecur: "2021-11-08",
              endRecur: "2021-11-17",
            },
            {
              id: "20211112011",
              allDay: true,
              start: "2021-11-06T00:00:00",
              title: "拥有扩展属性(点击查看控制台)",
              extendedProps: {
                order: "扩展属性",
              },
            },
            {
              groupId: "availableForMeeting",
              start: "2021-11-11T10:00:00",
              end: "2021-11-11T16:00:00",
              display: "background",
            },
            {
              groupId: "availableForMeeting",
              start: "2021-11-13T10:00:00",
              end: "2021-11-13T16:00:00",
              display: "background",
            },
            {
              title: "拖动限制(拖到11号试试)",
              start: "2021-11-13T11:00:00",
              constraint: "availableForMeeting", // defined below
              color: "#257e4a",
            },
            {
              title: "呈现为实心矩形",
              start: "2021-11-10T09:00:00",
              end: "2021-11-10T18:00:00",
              display: "block",
            },
            {
              title: "呈现为点",
              start: "2021-11-10T09:00:00",
              end: "2021-11-10T18:00:00",
            },
            {
              start: "2021-11-12T00:00:00",
              end: "2021-11-13T00:00:00",
              display: "background",
              color: "#3300FF",
            },
            {
              title: "这片区域禁止事件进入",
              start: "2021-11-24",
              end: "2021-11-28",
              overlap: false,
              display: "background",
              color: "#FF0000",
            },
          ];
           callback(even);
          }
    注意！！！Fullcalendar支持简单的重复事件(重复周),
    如果需要定制复杂的重复规则请参考文档https://fullcalendar.io/docs/rrule-plugin
    /////////////////////////
    
    eventDrop(event)拖动日程触发函数.
    select(selectInfo)选择范围后触发.
    eventClickclickInfo)点击日程后触发.
    eventsSet(events)在事件数据初始化或以任何方式更改后调用.
    
    这里简单说说如何调用Api
    父组件里的方式为：var calendarApi =this.$refs["calendar"].$refs["qmCalendar"].getApi().view.calendar;
    calendarApi.unselect();//取消选中
    calendarApi.addEvent();//添加事件
    calendarApi.getEventById;//根据ID获取event
    calendarApi.remove();//移除event
    请参考文档:
 -->
<template>
  <div class="qm-calendar">
    <FullCalendar ref="qmCalendar" :options="calendarOptions">
      <!-- 自定义显示样式
        <template v-slot:eventContent="arg">
          <div class="information-content">
            <i class="el-icon-bell">{{ arg.event.title }}</i>
          </div>
      </template>-->
    </FullCalendar>
  </div>
</template>

<script>
// 引入已经安装好的，项目中所需要的 FullCalendar 插件
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
import zhCn from "@fullcalendar/core/locales/zh-cn";

export default {
  name: "qm-calendar",
  components: {
    FullCalendar,
  },
  data() {
    return {
      // 日历配置参数
      calendarOptions: {
        plugins: this.plugins,
        headerToolbar: this.headerToolbar,
        locale: zhCn,
        dayMaxEventRows: this.dayMaxEventRows,
        views: {
          timeGrid: {
            dayMaxEventRows: 6,
          },
        },
        firstDay: this.firstDay,
        events: this.events,
        weekNumbers: this.weekNumbers,
        aspectRatio: this.aspectRatio,
        handleWindowResize: this.handleWindowResize,
        nowIndicator: this.nowIndicator,
        showNonCurrentDates: this.showNonCurrentDates,
        //更改主题，测试未生效
        // theme: true,
        themeSystem: "bootstrap",
        bootstrapFontAwesome: false,
        buttonText: this.buttonText,
        customButtons: this.customButtons,
        navLinks: this.navLinks,
        lazyFetching: this.lazyFetching,
        defaultAllDayEventDuration: { days: 1 }, //默认1天是多长，（有的是采用工作时间模式，所以支持自定义）
        initialView: this.initialView,
        editable: this.editable,
        droppable: this.droppable,
        validRange: this.validRange,
        eventDrop: this.eventdrop,
        selectable: this.selectable,
        selectMirror: this.selectMirror,
        dayMaxEvents: this.dayMaxEvents,
        weekends: this.weekends,
        select: this.select,
        eventClick: this.eventClick,
        eventsSet: this.eventsSet,
        eventAdd: this.eventAdd,
        eventChange: this.eventChange,
        eventRemove: this.eventRemove,
        fixedWeekCount: this.fixedWeekCount,
      },
    };
  },
  props: {
    //将显示在 headerToolbar/footerToolbar 按钮上的文本。
    buttonText: {
      type: Object,
    },
    //如果true，则日历将始终为 6 周高。如果false，则日历将有 4、5 或 6 周，具体取决于月份。
    fixedWeekCount: {
      type: Boolean,
      default: false,
    },
    //是否显示周六日
    weekends: {
      type: Boolean,
      default: true,
    },
    //日程能显示的条数,过多以弹窗显示
    dayMaxEvents: {
      type: Boolean,
      default: true,
    },
    //是否能在日历上选择日期范围
    selectable: {
      type: Boolean,
      default: true,
    },
    //在天视图下,选择范围颜色突出显示
    selectMirror: {
      type: Boolean,
      default: true,
    },
    //限制显示的日期范围,请参考文档 https://fullcalendar.io/docs/validRange
    validRange: {
      type: Object,
      default: () => {},
    },
    //是否允许外部事件拖入
    droppable: {
      type: Boolean,
      default: false,
    },
    //是否可以修改日历上的事件,请参考文档 https://fullcalendar.io/docs/editable
    editable: {
      type: Boolean,
      default: true,
    },
    //初始化视图
    initialView: {
      type: String,
      default: "dayGridMonth",
    },
    //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的
    lazyFetching: {
      type: Boolean,
      default: true,
    },
    //表格上的周数是否能点击进入周视图
    navLinks: {
      type: Boolean,
      default: true,
    },
    //开启设置最大视图条数
    dayMaxEventRows: {
      type: Boolean,
      default: true,
    },
    //设置一周中显示的第一天是哪天，周日是0，周一是1，类推
    firstDay: {
      type: Number,
      default: 1,
    },
    //配置插件,根据需求可自定义
    plugins: {
      type: Array,
      default: () => {
        return [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin];
      },
    },
    //定义日历头部栏 请参考文档:https://fullcalendar.io/docs/toolbar
    headerToolbar: {
      type: Object,
      default: () => {
        return {
          left: "prevYear,prev,next,nextYear today customButtons",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
        };
      },
    },
    //是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
    weekNumbers: {
      type: Boolean,
      default: true,
    },
    //设置日历单元格宽度与高度的比例。
    aspectRatio: {
      type: Number,
      default: 1.35,
    },
    //是否随浏览器窗口大小变化而自动变化。
    handleWindowResize: {
      type: Boolean,
      default: true,
    },
    //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
    nowIndicator: {
      type: Boolean,
      default: true,
    },
    //可选日期范围,false只选当前月
    showNonCurrentDates: {
      type: Boolean,
      default: false,
    },
    //自定义按钮 请参考文档:https://fullcalendar.io/docs/customButtons
    customButtons: {
      type: Object,
      default: () => {
        return {
          customButtons: {
            text: "添加按钮演示",
            click() {
              alert("点击了按钮!");
            },
          },
        };
      },
    },
  },
  watch: {},
  methods: {
    eventsSet(events) {
      this.$emit("eventsSet", events);
    },
    eventClick(clickInfo) {
      // console.log(this.$refs["qmCalendar"].getApi().view.calendar);
      this.$emit("eventClick", clickInfo);
    },
    events(start, callback) {
      this.$emit("events", start, callback);
    },
    eventdrop(event) {
      this.$emit("eventdrop", event);
    },
    select(selectInfo) {
      this.$emit("select", selectInfo);
    },
    eventAdd(addInfo) {
      this.$emit("eventAdd", addInfo);
    },
    eventChange(changeInfo) {
      this.$emit("eventChange", changeInfo);
    },
    eventRemove(removeInfo) {
      this.$emit("eventRemove", removeInfo);
    },
  },
};
</script>
